{extend name="base"}
{block name="style"}{/block}
{block name="content"}
<div class="page-title">
    <div class="breadcrumb-env pull-left">
        <ol class="breadcrumb bc-1">
            <li>
                <a href="{:url('Order/index')}"><i class="fa-home"></i>首页</a>
            </li>
            <li>
                <a href="">发货管理</a>
            </li>
            <li class="active">
                <strong>理货任务</strong>
            </li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <!-- Removing search and results count filter -->
        <div class="panel panel-default" ms-controller="app">

            <div class="panel-heading btn-toolbar">
                <h3 class="panel-title">出库单详情</h3>
            </div>


            <div class="panel-body">

                <!-- 出单 -->
                <div style="padding-bottom:10px;">
                    <div class="btn-toolbar row">

                        <form class="form-inline col-xs-12" style="margin-bottom:10px;" class="search-tool">
                            <span class="col-xs-4">
                                <label class="control-label">出库单号：</label>
                                <input type="text" class="form-control" placeholder="出库单号" :attr="{value:@info.sn}"
                                    :on-change="getSn()" :duplex="@info.sn">
                            </span>

                            <span class="col-xs-8">
                                <label class="control-label">订单编号：</label>
                                <input type="text" class="form-control" placeholder="订单号" :attr="{value:@info.sn}">
                            </span>

                            <span class="col-xs-4" style="margin-top:10px;">
                                <label class="control-label">预估总额：</label>
                                <input type="text" class="form-control" placeholder="总额"
                                    :attr="{value:@info.total+'.00'}">
                            </span>

                            <span class="col-xs-8" style="margin-top:10px;">
                                <label class="control-label">实际总额：</label>
                                <input type="text" class="form-control" placeholder="总额"
                                    :attr="{value:@info.total+'.00'}">
                            </span>

                            <span class="col-xs-4" style="margin-top:10px;">
                                <label class="control-label">实际运费：</label>
                                <input type="text" class="form-control" placeholder="实际运费" value="0">
                            </span>

                            <span class="col-xs-8" style="margin-top:10px;">
                                <label class="control-label">配送方式：</label>
                                <input type="text" class="form-control" placeholder="配送方式"
                                    :attr="{value:@info.delivery}">
                            </span>

                            <span class="col-xs-4" style="margin-top:10px;">
                                <label class="control-label">收件人&nbsp;&nbsp;&nbsp;：</label>
                                <input type="text" class="form-control" placeholder="收件人"
                                    :attr="{value:@info.receiver_name}">
                            </span>

                            <span class="col-xs-8" style="margin-top:10px;">
                                <label class="control-label">收件电话：</label>
                                <input type="text" class="form-control" placeholder="收件电话"
                                    :attr="{value:@info.receiver_phone}">
                            </span>

                        </form>

                    </div>
                    <!-- searach -->


                    <table class="table table-bordered " if="info.total">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>产品名称</th>
                                <th>产品编号</th>
                                <th>产品单价</th>
                                <th>产品数量</th>
                                <th>小计</th>
                            </tr>
                        </thead>

                        <tbody class="middle-align">

                            <tr role="row" :for="(k,el) in @info.list">
                                <td>
                                    <label class="control-label" :text="@k+1"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.name"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.sn"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.price"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.num"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.count+'.00'"></label>
                                </td>
                            </tr>
                            <tr role="row" :if="info.total">
                                <td colspan="4"></td>
                                <td>总额</td>
                                <td>
                                    <label class="control-label" :text="@info.total+'.00'"></label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>


                <div class="pull-right col-xs-12" :if="info.total">
                    <button class="btn btn-default btn-primary" :on-click="isPrint">
                        <span class="fa-file-pdf-o"></span> 打印
                    </button>
                    <center> <b>[ 打印样本 ]</b> </center>
                    <hr>
                </div>


                <!-- 打印出单 -->
                <div id="app" style="margin-top:50px;" :if="info.total">
                    <div class="btn-toolbar row">

                        <form class="form-inline col-xs-8">
                            <span class="col-xs-12">
                                <label class="control-label">出库单号：</label>
                                <label class="control-label" :text="@info.sn"></label>
                            </span>

                            <span class="col-xs-12">
                                <label class="control-label">订单编号：</label>
                                <label class="control-label" :text="@info.sn">：</label>
                            </span>

                            <span class="col-xs-4">
                                <label class="control-label">预估总额：</label>
                                <label class="control-label" :text="@info.total+'.00'"></label>
                            </span>

                            <span class="col-xs-8">
                                <label class="control-label">实际总额：</label>
                                <label class="control-label" :text="@info.total+'.00'"></label>
                            </span>

                            <span class="col-xs-4">
                                <label class="control-label">实际运费：</label>
                                <label class="control-label" :text="@info.total+'.00'"></label>
                            </span>

                            <span class="col-xs-8">
                                <label class="control-label">配送方式：</label>
                                <label class="control-label" :text="@info.delivery"></label>
                            </span>

                            <span class="col-xs-4">
                                <label class="control-label">收件人&nbsp;&nbsp;&nbsp;：</label>
                                <label class="control-label" :text="@info.receiver_name"></label>
                            </span>

                            <span class="col-xs-8">
                                <label class="control-label">收件电话：</label>
                                <label class="control-label" :text="@info.receiver_phone"></label>
                            </span>

                        </form>
                        <div class="col-xs-4">
                            <img :attr="{src:barcode}" class="pull-right">
                        </div>

                    </div>
                    <!-- searach -->


                    <table class="table table-bordered ">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>产品名称</th>
                                <th>产品编号</th>
                                <th>产品单价</th>
                                <th>产品数量</th>
                                <th>小计</th>
                            </tr>
                        </thead>

                        <tbody class="middle-align">

                            <tr role="row" :for="(k,el) in @info.list">
                                <td>
                                    <label class="control-label" :text="@k+1"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.name"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.sn"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.price"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.num"></label>
                                </td>
                                <td>
                                    <label class="control-label" :text="@el.count+'.00'"></label>
                                </td>
                            </tr>
                            <tr role="row" :if="info.total">
                                <td colspan="4"></td>
                                <td>总额</td>
                                <td>
                                    <label class="control-label" :text="@info.total+'.00'"></label>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="row" style="margin-top:10px;">
                        <div class="col-xs-8">
                            <div style="height:100px;width:100px;border:1px dashed #ccc;"></div>
                        </div>
                        <div class="col-xs-4" style="margin-top:30px;">
                            <div class="form-group no-margin">
                                <label class="control-label">客服电话:</label>
                                <label class="control-label">400-800-1234</label>
                            </div>
                            <div class="form-group no-margin">
                                <label class="control-label">微信:</label>
                                <label class="control-label">400-800-1234</label>
                            </div>
                            <div class="form-group no-margin">
                                <label class="control-label">邮箱:</label>
                                <label class="control-label">xenon@amin.com</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="__STATIC__/js/avalon.js"></script>
<script src="__STATIC__/js/jQuery.print.js"></script>
<script>
    var vm = avalon.define({
        $id: "app",
        barcode: "",
        info: {
            sn: '',
            receiver_name: '',
            receiver_phone: '',
            delivery: '',
            list: {},
            total: 0
        },
        getSn: function () {
            // this.info.sn = 'AD888013016NY';
            this.getInfo();
        },
        getInfo: function () {
            var _this = this;
            $.post("{:url('/Pack/getSn')}", { "sn": this.info.sn }, function (data) {
                data.list = JSON.parse(data.list);
                _this.info = data;
                // console.log(data.list);
                _this.barcode = "{:trim(url('/Instorage/barcode/sn/'),'.html') }" + _this.info.sn;
                _this.getBarcode();
            }, "json");
        },
        isPrint: function () {
            $("#app").print();
        }
    });
    $(function(){
        nav_show();
    });
</script>
{/block}







